<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时合如壹</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">
        <style>
            body{
                background-color: #f5f5f5;
                padding: 0;
                margin: 0;
            }
            .nav{
                position: fixed;
                left: 0;
                top: 0;
            }
            .content{
                padding-top: 5px;
                width: calc(100% - 80px);
                float: right;
            }
            /* 手机样式 */
            .productItem{
                margin-bottom:15px;
                background-color: #ffffff;
                overflow: hidden;
            }
            .productImgDiv{
                float: left;
                font-size: 0;
                width: 100px;
                height: 100px;
                padding: 5px;
                box-sizing: border-box;
            }
            .productImg{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .productInfo{
                height: 100px;
                width: calc(100% - 100px);
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                font-size: 12px;
                color: #999999;
            }
            .productInfo span{
                color: #666666;
            }
            .productName{
                font-size: 14px;
                color: #333333;
                font-weight: 400px;
                height: 40px;
                word-break: break-all;
            }
            /* ipad样式 */
            .productItemIpad{
                margin-bottom: 15px;
                background-color: #ffffff;
                overflow: hidden;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
            }
            .productImgDivIpad{
                font-size: 0;
                width: 100%;
                height: calc( (100vw - 110px) / 3);
                padding: 5px;
                box-sizing: border-box;
            }
            .productImgIpad{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .productInfoIpad{
                padding: 0 5px 5px;
                box-sizing: border-box;
                width: 100%;
                font-size: 12px;
                color: #999999;
            }
            .productInfoIpad span{
                color: #666666;
            }
            .productNameIpad{
                font-size: 14px;
                color: #333333;
                font-weight: 400;
                height: 40px;
                word-break: break-all;
            }
        </style>
        <!-- 引入样式文件 -->
        <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
        <!-- 引入 Vue 和 Vant 的 JS 文件 -->
        <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
        <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
        <script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.4.0/cloud.js"></script>
        <script>
            var xxcCloud
            async function initCloud(){
                xxcCloud = new cloud.Cloud({
                  identityless: true,
                  resourceAppid: 'wxd8f6a753d1aed803',
                  resourceEnv: 'ccg-database-1gns3p717137a34c'
                })
                await xxcCloud.init()
            }
            initCloud()
            // 不同于登录模式，在未登录模式中，资源方小程序对应环境下的 cloudbase_auth 不会被调用，但此处 init 也是必须的。
            var ajax = function(func,data,method){
                    return new Promise(function(resolve){
                       xxcCloud.callFunction({
                           name: 'shry',
                           data: {
                             func:func,
                             data:data,
                             method:method || '',
                           },
                       }).then(res=>{
                           switch(res.result.code) {
                               case 200:
                                  resolve(res.result.data)
                                  break;
                               case 400:
                                  Message.error({message: res.result.message});
                                  break;
                               case 401:
                                  Message.error({message: res.result.message});
                                  router.push('/login');
                                  break;
                               default:
                                  Message.error({message: "未知错误"});
                                  return
                           }
                       })
                    })
                }
        </script>
    </head>
    <body>
        <div id="app">
            <div class="nav">
                <van-sidebar v-model="activeKey" @change="onChange"> 
                  <van-sidebar-item v-for="item in categorys" :key="item.name" :title="item.name" ></van-sidebar-item>
                </van-sidebar>
            </div>
            <div class="content" v-if="widthType==='mobile'">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="更多新品,尽请期待"
                  :immediate-check="false"
                  @load="onLoad"
                >
                  <div class="productItem" :key="item._id" v-for="item in data">
                      <div @click="showImages(item)" class="productImgDiv"><img class="productImg" :src="item.展示图 && item.展示图.fileUrl" alt=""></div>
                      <div class="productInfo">
                          <div class="productName">{{item.名称}}</div>
                          <div class="productMaterial"><span>材质：</span>{{item.材质}}</div>
                          <div class="productSize"><span>尺寸：</span>{{item.尺寸}} {{item.单位}}</div>
                          <div class="productWeight"><span>重量：</span>{{item.重量}}克</div>
                      </div>
                  </div>
                </van-list>
            </div>
            <div v-else class="content" >
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="更多新品,尽请期待"
                  :immediate-check="false"
                  @load="onLoad"
                >   
                <van-row gutter="15">
                  <van-col span="8" :key="item._id" v-for="item in data">
                      <div class="productItemIpad">
                          <div @click="showImages(item)" class="productImgDivIpad"><img class="productImgIpad" :src="item.展示图 && item.展示图.fileUrl" alt=""></div>
                          <div class="productInfoIpad">
                              <div class="productNameIpad">{{item.名称}}</div>
                              <div class="productMaterialIpad"><span>材质：</span>{{item.材质}}</div>
                              <van-row>
                                <van-col span="12"><div class="productSizeIpad"><span>尺寸：</span>{{item.尺寸}} {{item.单位}}</div></van-col>
                                <van-col span="12"><div class="productWeightIpad"><span>重量：</span>{{item.重量}}克</div></van-col>
                              </van-row>
                          </div>
                      </div>
                  </van-col>
                </van-row>
                    
                </van-list>
            </div>
            
        </div>
    </body>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let innerWidth = window.innerWidth
      console.log(window.innerWidth)
      new Vue({
        el: '#app',
        data:{
            widthType:innerWidth>450?'ipad':'mobile',
            activeKey: 0,
            loading:false,
            finished:false,
            data:[],
            categorys:[],
            pages: {
                page: 1,
                size: innerWidth>450?15:10,
                total: 0
            },
            query:{
                分类:"",
            },
        },
        created() {
            this.getCategory()
        },
        methods:{
            showImages(item){
                let imgs = []
                if(item.展示图){
                    imgs.push(item.展示图.fileUrl)
                }
                item.详情图集.forEach(function(i){
                    imgs.push(i.fileUrl)
                })
                if(imgs.length===0){
                    return
                }
                try{
                    if(WeixinJSBridge){
                    	WeixinJSBridge.invoke('imagePreview', {
                    	    current: imgs[0],
                    	    urls: imgs
                    	}, function(res) {
                    	    console.log(res.err_msg)
                    	})
                    }else{
                        vant.ImagePreview(imgs);
                    }
                }catch(error){
                    vant.ImagePreview(imgs);
                }
            },
            getCategory(){
                ajax('category',{
                    skip:0,
                    limit:20
                },'get').then(res=>{
                    this.categorys = res.content
                    this.getData()
                })
            },
            getData() {
                let skip = (this.pages.page - 1) * this.pages.size
                let limit = this.pages.size
                this.loading = true
                this.query.分类 = this.categorys[this.activeKey].name
                ajax('product', {
                    skip,
                    limit,
                    query: this.query
                }, 'get').then(res => {
                    console.log(res)
                    this.loading = false
                    this.data = this.data.concat(res.content)
                    if(res.count=== this.data.length){
                        this.finished = true
                    }
                    this.pages.total = res.count
                    
                }).catch(()=>{
                    this.loading = false
                })
            },
            onChange(){
                this.finished = false
                this.pages.page = 1
                this.getData()
                this.data.length = 0
            },
            onLoad(){
                this.pages.page++
                this.getData()
            },
        },
      });
    
    </script>
</html>